<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            margin: 20px auto;
        }
    </style>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            stuList: [
                {
                    name: "张三",
                    age: 18,
                    sex: "男",
                    phone: 110
                }, {
                    name: "李四",
                    age: 20,
                    sex: "女",
                    phone: 120
                }
            ],
            name: "",
            age: "",
            sex: "",
            phone: "",
            // 将要编辑的学生索引
            index: null
        }
        modeRef = React.createRef();
        render() {
            let { stuList, name, age, sex, phone } = this.state;
            return (
                <div className='box'>
                    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#myModal" onClick={() => {
                        this.setState({
                            index: null
                        })
                    }}>添加学生</button>
                    <br /> <br />
                    <table className="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>联系方式</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                stuList.map((item, index) => {
                                    return (
                                        <tr key={index}>
                                            <td>{item.name}</td>
                                            <td>{item.sex}</td>
                                            <td>{item.age}</td>
                                            <td>{item.phone}</td>
                                            <td>
                                                <button type="button" className="btn btn-danger btn-sm" onClick={() => this.remove(index)}>删除</button>
                                                &nbsp;  &nbsp;
                                                <button type="button" className="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" onClick={() => {
                                                    // 根据当前索引找到学生信息
                                                    let stuMsg = stuList[index];
                                                    let { name, age, sex, phone } = stuMsg
                                                    this.setState({
                                                        index: index,
                                                        name: name,
                                                        age: age,
                                                        sex: sex,
                                                        phone: phone
                                                    })
                                                }}>编辑</button>
                                            </td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                    <div className="modal fade" id="myModal" ref={this.modeRef}>
                        <div className="modal-dialog">
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h4 className="modal-title">{this.state.index === null ? "添加学生" : "编辑学生"}</h4>
                                    <button type="button" className="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div className="modal-body">
                                    <div className="input-group mb-3">
                                        <div className="input-group-prepend">
                                            <span className="input-group-text">姓名</span>
                                        </div>
                                        <input type="text" className="form-control" placeholder="请输入姓名" value={name} onChange={(e) => {
                                            name = e.target.value;
                                            this.setState({
                                                name: name
                                            })
                                        }} />
                                    </div>
                                    <div className="input-group mb-3">
                                        <div className="input-group-prepend">
                                            <span className="input-group-text">年龄</span>
                                        </div>
                                        <input type="text" className="form-control" placeholder="请输入年龄" value={age} onChange={(e) => {
                                            this.setState({
                                                age: e.target.value
                                            })
                                        }} />
                                    </div>
                                    <div className="input-group mb-3">
                                        <div className="input-group-prepend">
                                            <span className="input-group-text">性别</span>
                                        </div>
                                        <input type="text" className="form-control" placeholder="请输入性别" value={sex} onChange={(e) => {
                                            this.setState({
                                                sex: e.target.value
                                            })
                                        }} />
                                    </div>
                                    <div className="input-group mb-3">
                                        <div className="input-group-prepend">
                                            <span className="input-group-text">联系方式</span>
                                        </div>
                                        <input type="text" className="form-control" placeholder="请输入联系方式" value={phone} onChange={(e) => {
                                            this.setState({
                                                phone: e.target.value
                                            })
                                        }} />
                                    </div>
                                </div>
                                <div className="modal-footer">
                                    <button type="button" className="btn btn-success" onClick={() => this.comfirmAdd()}>{this.state.index === null ? '确认添加' : "确认修改"}</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            )
        }
        comfirmAdd() {
            // 获取输入框内容
            let { name, age, sex, phone, stuList } = this.state;
            // 判断输入框内容是否为空
            if (!name || !age || !sex || !phone) {
                alert("请您补充完整信息！")
                return;
            }
            // 判断当前是修改还是添加
            if (this.state.index !== null) {
                // 编辑学生
                stuList[this.state.index] = {
                    name,
                    age,
                    sex,
                    phone
                }
                this.setState({
                    stuList: stuList,
                    name: "",
                    age: "",
                    sex: "",
                    phone: ""
                }, () => {
                    // 隐藏模态框
                    this.modeRef.current.style.display = 'none';
                    $(".modal-backdrop").hide();
                })
                return
            }
            // 判断当前学生是否存在 若不存在 则添加若存在则提示用户
            let index = stuList.findIndex((item) => {
                return item.name === name;
            })
            if (index !== -1) {
                alert("当前学生已存在！")
                return
            }
            // 将当前学生信息添加到学生列表中
            let user = {
                name,
                age,
                sex,
                phone
            }
            stuList.push(user);
            this.setState({
                stuList: stuList,
                name: "",
                age: "",
                sex: "",
                phone: ""
            }, () => {
                // 隐藏模态框
                this.modeRef.current.style.display = 'none';
                $(".modal-backdrop").hide();
            })
        }
        // 删除学生信息
        remove(index) {
            let { stuList } = this.state;
            stuList.splice(index, 1);
            this.setState({
                stuList: stuList
            })
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"))

    //处理数组的splice方法 删除数组中元素
    let arry = ["张三", "王五", '赵六', "李四"];
    // 参数一从哪个索引开始删除参数二删除几个元素若不传默认删除到最后  改变元素组
    arry.splice(1, 1);
    console.log(arry)
</script>

</html>